<style>
    .contextMenu {
        position: absolute;
        z-index: 99999;
        border: solid 1px rgba(0, 0, 0, .33);
        background: rgba(255, 255, 255, .95);
        padding: 5px 0;
        margin: 0px;
        display: none;
        font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
        -webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
        box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
    }

    .contextMenu li {
        list-style: none;
        padding: 0px;
        margin: 0px;
        position: relative;
    }
    .contextMenu li.active{
        background-color: green;
    }

    .contextMenu li:hover{
        background-color: rgb(198, 228, 228);
    }

    .contextMenu li>ul {
       display: none;
       position: absolute;
       left: 100%;
       top: 2px;
       text-align: left;
       padding: 0;
       background: #fff;
       border-radius: 2px;
    }

    .contextMenu li>ul>li{
        line-height: 20px;
        height: 20px;
        padding: 0 0px;
        width: fit-content;
        text-align: center;
        cursor: pointer;
    }
    .contextMenu li>ul>li:hover{
        background-color: rgb(198, 228, 228);
    }
    

    .contextMenu>li:hover>ul{
        display: block;
    }
    .contextMenu>.lichild:hover::after{
        content: ' ';
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        display: inline-block;
        position: absolute;
        background-image: url('images/rightarrow-menu.png');
        background-size: contain;
        background-repeat: no-repeat;

    }

    
    .contextMenu>li.sock{
        background: gray;
        cursor: not-allowed;
    }

    .contextMenu>li.haSock::after{
        content: ' ';
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        display: inline-block;
        position: absolute;
        background-image: url('images/rigntChoose.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
    
  

    .contextMenu>li.sock:hover>ul{
        display: none;
    }

    .contextMenu>.lichild.sock:hover::after{
       display: none;

    }



    .contextMenu .shortcut {
        width: 115px;
        text-align: right;
        float: right;
    }

    .contextMenu a {
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        color: #222;
        text-decoration: none;
        display: block;
        line-height: 20px;
        height: 20px;
        background-position: 6px center;
        background-repeat: no-repeat;
        outline: none;
        padding: 0px 15px 1px 20px;
        white-space: nowrap;
    }

    .contextMenu li.hover a {
        background-color: #7c7f88;
        color: white;
        cursor: default;
    }

    .contextMenu li.disabled a {
        color: #999;
    }

    .contextMenu li.hover.disabled a {
        background-color: transparent;
    }

    .contextMenu li.separator {
        border-top: solid 1px #E3E3E3;
        padding-top: 5px;
        margin-top: 5px;
    }
</style>
